<template>
  <view class="equipment-main" v-if="equipment">
    <view class="equipment-head">
      <view class="thumb">
        <image
          :lazy-load="true"
          class="icon"
          :src="equipment.pic"
          mode="widthFix"
        ></image>
		<image class="rotate" :src="equipment.is_warning === 1 || equipment.online !== 1 ? imgBaseUrlV2+ 'home_red_bg.png' :imgBaseUrlV2+ 'home_green_bg.png'" mode=""></image>
      </view>

      <view class="box">
      	<view class="bd">
      	  <view class="title">
      	    {{ equipment.factory_name }}{{ equipment.product_lines_name }}{{equipment.device_host_name}}{{ equipment.name || equipment.device_name  }}
      	  </view>
      	</view>  	
      	<view class="ft">
      	  <label :class="equipment.is_warning === 1 ||equipment.online !== 1 ? 'line-error' : 'line'">
      	    {{ equipment.is_warning === 1 || equipment.online !== 1 ? "设备异常": "设备正常" }}
      	  </label>
      	</view>
      </view>
    </view>

    <view class="status-area" v-if="equipment.indexInfo">
      <template v-for="(status, sIndex) in equipment.indexInfo">
        <view class="item" :key="status.field_key" v-if="sIndex < 3">
          <view class="num">{{ status.new_value }}{{ status.unit }}</view>
          <view class="name">{{ status.display_name }}</view>
        </view>
      </template>

      <!-- <view class="item">
        <view class="num">0.06%</view>
        <view class="name">湿度</view>
      </view>
      <view class="item">
        <view class="num">0.17Mpa</view>
        <view class="name">供油压力</view>
      </view> -->
      <!-- @click.stop="onClickExtend(equipment, eIndex)" -->
      <view class="item icon-item" :class="{ active: equipment.expand }">
        <image :src="imgBaseUrlV2 + 'home_arrow.png'" mode="" class="icon" />
      </view>
    </view>
  </view>
</template>

<script>
import { imgBaseUrlV2, } from "@/common/config";

export default {
  props: {
    equipment: {
      type: Object,
      default: null,
    },
    imgBaseUrlV2: {
      default: imgBaseUrlV2,
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.equipment-main {
  flex: 1;

  >.equipment-head {
    display: flex;
    margin-bottom: 40rpx;

    >.thumb {
	   position:relative;
      .icon {
        display: block;
        width: 112rpx;
		// height:112rpx!important;
		border-radius:50%;
		margin: 30rpx 0 0 15rpx;
		position:relative;
		z-index: 3;
      }
	  .rotate {
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: 1;
		  display: block;
		  width: 140rpx;
		  height:140rpx!important;
		  border-radius:50%;
		  animation: rotate 2s infinite linear forwards;
	  }

      margin-right: 16rpx;
    }
	.box {
		>.bd {
		  position: relative;
		  flex: 1;
		
		  .title {
		    font-size: 27rpx;
		    font-family: PingFangSC-Regular, PingFang SC;
		    font-weight: bold;
		    color: color-white;
			padding: 0 16rpx;
			margin-left: 20rpx
		  }
		
		  .desc {
		    font-size: 28rpx;
		    font-family: PingFangSC-Regular, PingFang SC;
		    font-weight: 400;
		    color: color-white;
		    line-height: 40rpx;
		  }
		}
		
		.line-error {
		  display: inline-block;
		  min-width: 120rpx;
		  font-weight: 500;
		  text-align: center;
		  font-size: 24rpx;
		  color: #CD3833;
		  height: 40rpx;
		  line-height: 40rpx;
		  background: rgba(205, 56, 51, 0.5);
		  border-radius: 4rpx;
		  padding: 0 16rpx;
		  border: none;
		  margin-left: 20rpx;
		}
		.line {
			display: inline-block;
			min-width: 120rpx;
			font-weight: 500;
			text-align: center;
			font-size: 24rpx;
			color: #fff;
			height: 40rpx;
			line-height: 40rpx;
			background: rgba(77, 192, 82,1);
			border-radius: 4rpx;
			padding: 0 16rpx;
			border: none;
			margin-left: 20rpx;
		}
		
		>.ft {
		  flex: 0 0 auto;
		
		  >.icon {
		    display: block;
		    width: 44rpx;
		    height: 44rpx;
		  }
		}
	}
  }

  .line {
    font-size: 28rpx;
    line-height: 50rpx;
    color: #333;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC;

    .icon {
      width: 26rpx;
      vertical-align: middle;
      margin-right: 14rpx;
      margin-top: -4rpx;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}

.status-area {
  display: flex;
  background: #F9FCFF;
  border-radius: 2rpx;

  >.item {
    flex: 1;
    align-items: center;
    text-align: center;
    padding: 20rpx 12rpx;

    &.icon-item {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
    }

    &.active >.icon {
      transform: rotate(90deg);
    }

    >.icon {
      display: block;
      width: 56rpx;
      height: 56rpx;
      margin: 0 auto;
      transition: all 0.3s;
    }

    >.num {
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: bold;
      color: color-default;
      margin-bottom: 12rpx;
      padding-top: 2rpx;
      line-height: 1;
    }

    >.name {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: color-desc;
      line-height: 1;
    }
  }
}
</style>